<template>
  <div class="changePassword">
      <a-tabs default-active-key="1" size="large" v-if="$store.state.pwdFlag == 'N'">
        <a-tab-pane key="1" tab="完善密码">
            <div class="form">
                <p class="title">
                    新密码：
                </p>
                <a-input type="password" v-model="pwd" placeholder="请输入密码" />
            </div>
            <div class="form">
                <p class="title">
                    确认新密码：
                </p>
                <a-input type="password" v-model="enterpwd" placeholder="请输入8-14位，字母、数字的组合密码" />
            </div>
            <div class="btn">
                <p class="back" @click="$router.go(-1)">取消</p>
                <p class="enter" @click="perfectPassword">确认修改</p>
            </div>
        </a-tab-pane>
      </a-tabs>
      <a-tabs default-active-key="1" size="large" v-else>
        <a-tab-pane key="1" tab="修改密码">
            <div class="form">
                <p class="title">
                    原密码：
                </p>
                <a-input type="password" v-model="oldPwd" placeholder="请输入密码" />
            </div>
            <div class="form">
                <p class="title">
                    新密码：
                </p>
                <a-input type="password" v-model="newPwd" placeholder="请输入8-14位，字母、数字的组合密码" />
            </div>
            <div class="form">
                <p class="title">
                    确认新密码：
                </p>
                <a-input type="password" v-model="enternewPwd" placeholder="请确认新密码" />
            </div>
            <div class="btn">
                <p class="back" @click="$router.go(-1)">取消</p>
                <p class="enter" @click="changePassword">确认修改</p>
            </div>
        </a-tab-pane>
      </a-tabs>
  </div>
</template>

<script>
export default {
    data(){
        return {
            // 完善密码参数
            pwd:"",
            enterpwd:"",
            // 修改密码参数
            oldPwd:"",
            newPwd:"",
            enternewPwd:""
        }
    },
    methods:{
        // 完善密码
        perfectPassword(){
            if(this.pwd === this.enterpwd && (/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,14}$/).test(this.pwd)){
                this.$ajax({
                    url:"/user/userinfo/perfect/password?pwd="+this.pwd,
                    method:"post"
                }).then((res)=>{
                    if(res.code == 200){
                        this.success();
                        this.pwd = "";
                        this.enterpwd = "";
                        this.$store.commit('changepwdFlag','Y');
                    }else{
                        this.$message.error(res.msg)
                    }
                })
            }else if((!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,14}$/).test(this.pwd)){
                this.passerror()
            }else if(this.pwd !== this.enterpwd){
                this.error()
            }
        },
        // 修改密码
        changePassword(){
            if(!this.oldPwd){
                this.$message.error('请输入原密码')
            }else if(!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,14}$/.test(this.newPwd)){
                this.passerror();
            }else if(this.newPwd !== this.enternewPwd){
                this.error();
            }else{
                this.$ajax({
                    url:"/user/userinfo/update/password?oldPwd="+this.oldPwd+"&newPwd="+this.newPwd,
                    method:"post"
                }).then((res)=>{
                    if(res.code == 200){
                        localStorage.setItem('rememberPassword',false);
                        localStorage.setItem('userName','');
                        localStorage.setItem('password','');
                        this.success();
                        this.oldPwd="";
                        this.newPwd="";
                        this.enternewPwd="";
                    }else{
                        this.$message.error(res.msg)
                    }
                })
            }
        },
        // /(?!^\d+$)(?!^[a-zA-Z]+$)[0-9a-zA-Z]{4,23}/
        success() {
            this.$success({
                title: '提示信息',
                // JSX support
                content: (
                <div>
                    <p>设置密码成功</p>
                </div>
                ),
                okText:'我知道了'
            });
        },
        passerror() {
            this.$error({
                title: '提示信息',
                content: '密码格式不规范',
                okText:'我知道了'
            });
        },
        error() {
            this.$error({
                title: '提示信息',
                content: '两次密码输入不一致',
                okText:'我知道了'
            });
        },
    }
}
</script>

<style scoped lang="less">
    .changePassword{
        .ant-tabs-tabpane-active{
            padding-top: 50px;
            padding-bottom: 50px;
        }
        .form{
            width: 437px;
            display: flex;
            align-items: center;
            margin-left: 56px;
            padding-bottom: 10px;
            margin-bottom: 15px;
            border-bottom: 1px solid #EEEEEE;
            .title{
                width: 96px;
                color: #666666;
                font-size: 16px;
            }
            /deep/.ant-input,.ant-calendar-picker{
                flex: 1;
                border: 0;
                list-style: none;
                box-shadow: none !important;
            }
            .func{
                color: #FB6D00;
                font-size: 16px;
                line-height: 22px;
                border-left: 2px solid #FB6D00;
                padding-left: 16px;
                cursor: pointer;
            }
        }
        .form:nth-child(3){
            border: 0;
        }
        .btn{
            display: flex;
            margin-top: 79px;
            margin-left: 56px;
            p{
                width: 108px;
                height: 40px;
                margin-right: 50px;
                text-align: center;
                line-height: 40px;
                cursor: pointer;
            }
            .back{
                border: 1px solid #FFBE37;
                color: #FFBE37;
            }
            .enter{
                background: #FFBE37;
                color: #333333;
            }
        }
    }
</style>